<template>
  <div class="map-base-container" :style="{width: mapWidth, height: mapHeight}">
    <div class="map-container" :ref="mapIDName" :style="{ pointerEvents: dataLoading ? ' none' : '' }">
      <div v-if="dataLoading" class="loading-mask">
       <div class="loading-mask-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import 'mars2d/dist/mars2d.css'
import * as mars2d from 'mars2d'
import { isGovernmentNet } from '@/utils/util'
import { mapConfig, baseMapUrl, baseMapUrlInGovernmentExtranet } from '@/defaultSettings'
import cityBoundsData from '@/static/map/yantai-city-level.json'

Vue.prototype.$IMap = mars2d // 挂载到Vue对象链，全局使用

export default {
  name: 'MapBaseYt',
  props: {
    mapWidth: {
      type: String,
      required: false,
      default: '100%'
    },
    mapHeight: {
      type: String,
      required: false,
      default: '100%'
    },
    // 是否自动初始化
    autoInit: {
      type: Boolean,
      required: false,
      default: true
    },
    // 初始化层级
    initZoom: {
      type: Number,
      required: false,
      default: 3
    },
    isShowBounds: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      mapIDName: '',
      map: null,
      dataLoading: false
    }
  },
  created() {
    this.mapIDName = this.createUUID(6)
  },
  mounted() {
    if (this.autoInit) this.initMap()
  },
  methods: {
    createUUID(len, radix) {
      const chars = '0123456789'.split('')
      const uuid = []
      radix = radix || chars.length
      if (len) {
        for (let i = 0; i < len; i++) {
          uuid[i] = chars[0 | Math.random() * radix]
        }
      }
      return 'map-' + uuid.join('')
    },
    initMap() {
      // 地图实例化
      this.map = new mars2d.Map(this.$refs[this.mapIDName], {
        zoom: this.initZoom,
        center: [mapConfig.center.lat, mapConfig.center.lng],
        minZoom: mapConfig.minZoom,
        maxZoom: mapConfig.maxZoom,
        copyright: false,
        defaultContextMenu: false,
        // 根据网络环境，使用不同底图
        basemaps: [{
          type: 'tile',
          url: `${isGovernmentNet() ? baseMapUrlInGovernmentExtranet : baseMapUrl}/{z}/{x}/{y}.png`,
          tms: 'true',
          chinaCRS: 'GCJ02',
          show: true
        }]
      })
      if (this.isShowBounds) {
        // 加载市边界
        const bounds = new mars2d.layer.GeoJsonLayer({
          name: '市界',
          data: cityBoundsData,
          symbol: {
            type: 'polyline',
            styleOptions: {
              color: '#0091ea',
              width: 3,
              interactive: false
            }
          }
        })
        this.map.addLayer(bounds)
        this.map.flyToGraphic(bounds)
      }
      this.$emit('loaded') // 地图加载完成事件抛出
    },
    // 检查经度、纬度合法性
    checkLatlng(value, type) {
      if (type !== 'lat' && type !== 'lng') return false // 入参合法性检查
      if (!(!isNaN(parseFloat(value)) && isFinite(value))) return false // 数字合法性检查
      // 数值范围合法性检查
      const valueLimit = {
        lat: [-90, 90],
        lng: [-180, 180]
      }
      if (parseFloat(value) >= valueLimit[type][0] && parseFloat(value) <= valueLimit[type][1]) return true
      else return false
    }
  }
}
</script>

<style lang="less" scoped>
  .map-base-container {
    position: relative;
    .map-container {
      width: 100%;
      height: 100%;
      .loading-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0d76f21a;
        z-index: 900;
        .loading-mask-spinner {
          width: 100%;
          position: absolute;
          top: calc(50% - 55px);
          text-align: center;
          .circular {
            height: 110px;
            width: 110px;
            -webkit-animation: loading-rotate 2s linear infinite;
            animation: loading-rotate 2s linear infinite;
          }
          .path {
            animation: loading-dash 1.5s ease-in-out infinite;
            stroke-dasharray: 90,150;
            stroke-dashoffset: 0;
            stroke-width: 2;
            stroke: #409eff;
            stroke-linecap: round;
          }
          @keyframes loading-dash {
            0% {
              stroke-dasharray: 1,200;
              stroke-dashoffset: 0;
            }
            50% {
              stroke-dasharray: 90,150;
              stroke-dashoffset: -40px;
            }
            100% {
              stroke-dasharray: 90,150;
              stroke-dashoffset: -120px;
            }
          }
          @keyframes loading-rotate {
            100% {
              transform: rotate(360deg);
            }
          }
        }
      }
    }
  }
</style>

<style>
.leaflet-map-pane svg {
  z-index: 100;
}
.leaflet-div-icon {
  background: none;
  border: none;
}
.leaflet-div-icon:hover {
  z-index: 0 !important;
}
.mars2d-logo {
  display: none;
}
</style>
